import Vue from 'vue'

const ChildComponent = {
  template: '<div>【child component】: {{data.value}}</div>',
  //
  inject: ['yeye', 'value', 'data'],
  mounted(){
    console.log(this.$parent.$options.name)
    console.log(this.yeye, this.value)
  }
}

const component = {
  name: 'comp',
  //组件内部定义组件
  components: {
    ChildComponent
  },
  // template: `
  //   <div :style="style">
  //     <!-- vue内置组件, 可以传入东西 -->
  //     <!--<slot></slot>-->
  //
  //     <!-- 具有名字的插槽 (具名插槽) -->
  //     <div class="header">
  //       <slot name="header"></slot>
  //     </div>
  //     <div class="body">
  //       <slot name="body"></slot>
  //     </div>
  //   </div>
  // `,


  template: `
    <div :style="style">
      <!-- -->
      <slot value="【component value】" aaa="abc"></slot>
      
      <!-- v-bind -->
      <slot :value="value" aaa="abc"></slot>
      
      <!-- 引用外部组件 -->
      <child-component></child-component>
    </div>
  `,
  data(){
    return {
      style: {
        width: '200px',
        height: '200px',
        border: '1px solid #aaa'
      },
      value: '【component value data】'
    }
  }
}

new Vue({
  components: {
    CompOne: component
  },
  //使用provide的时候 对象还没有初始化
  // provide: {
  //   yeye: this,
  //   value: this.value
  // },

  // provide  和 inject 是一对，
  // 父级定义了 provide 后，
  // 子级上就可以通过 inject 使用
  // 子组件不会重新渲染 除非提供get 方法
  provide () {
    const data = {}

    //get方法每次都获取 新的value
    Object.defineProperty(data, 'value', {
      get: () => this.value,
      enumerable: true
    })
    return {
      yeye: this,
      value: this.value,
      data
    }
  },
  el: '#root',
  data () {
    return {
      value: '【local.value】'
    }
  },
  mounted(){
    // 可以通过 $ref 去调用引用
    // 也可以修改值
    console.log(this.$refs.comp.value, this.$refs.span)
  },
  template: `
    <div>
      <comp-one ref="comp">
        <!--<span slot="header">this is header</span>-->
        <!--<span slot="body">this is body</span>-->
        
        <!-- 使用 component的 value-->
        <span>{{value}}</span>
        
        <!--slot-scope 可以使用组件中的定义的value -->
        <span slot-scope="props"  ref="span">{{props.value}} {{props.aaa}}  {{value}}</span>
      </comp-one>
      
      <input type="text" v-model="value"/>
    </div>
  `
})
